<template>
  <div class="profile">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-avatar">
        <van-image
          :src="userInfo.avatar"
          round
          width="60"
          height="60"
          fit="cover"
        />
      </div>
      <div class="user-info">
        <h3 class="username">{{ userInfo.nickname }}</h3>
        <p class="user-desc">{{ userInfo.description }}</p>
      </div>
      <van-icon name="arrow" class="arrow-icon" />
    </div>

    <!-- 订单统计 -->
    <div class="order-stats">
      <div class="stats-title">我的订单</div>
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="stat in orderStats"
          :key="stat.type"
          @click="goToOrders(stat.type)"
        >
          <van-icon :name="stat.icon" size="24" :color="stat.color" />
          <span class="stat-label">{{ stat.label }}</span>
          <span v-if="stat.count > 0" class="stat-badge">{{ stat.count }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <van-cell-group>
        <van-cell
          v-for="menu in menuList"
          :key="menu.title"
          :title="menu.title"
          :icon="menu.icon"
          is-link
          @click="handleMenuClick(menu.action)"
        >
          <template #right-icon>
            <van-badge v-if="menu.badge" :content="menu.badge" />
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 设置菜单 -->
    <div class="menu-section">
      <van-cell-group>
        <van-cell
          v-for="setting in settingList"
          :key="setting.title"
          :title="setting.title"
          :icon="setting.icon"
          is-link
          @click="handleSettingClick(setting.action)"
        />
      </van-cell-group>
    </div>

    <!-- 退出登录 -->
    <div class="logout-section">
      <van-button type="danger" block @click="logout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'

const router = useRouter()

// 用户信息
const userInfo = ref({
  avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&h=120&fit=crop&crop=face',
  nickname: '用户昵称',
  description: '这个人很懒，什么都没有留下'
})

// 订单统计
const orderStats = ref([
  { type: 'all', label: '全部', icon: 'orders-o', color: '#1989fa', count: 0 },
  { type: 'pending', label: '待付款', icon: 'pending-payment', color: '#ff976a', count: 2 },
  { type: 'shipped', label: '待发货', icon: 'tosend', color: '#07c160', count: 1 },
  { type: 'received', label: '待收货', icon: 'logistics', color: '#1989fa', count: 0 },
  { type: 'comment', label: '待评价', icon: 'comment-o', color: '#ff976a', count: 0 }
])

// 功能菜单
const menuList = ref([
  { title: '收货地址', icon: 'location-o', action: 'address' },
  { title: '优惠券', icon: 'coupon-o', action: 'coupon', badge: '3' },
  { title: '积分商城', icon: 'points', action: 'points' },
  { title: '我的收藏', icon: 'star-o', action: 'favorite' },
  { title: '浏览历史', icon: 'clock-o', action: 'history' },
  { title: '客服中心', icon: 'service-o', action: 'service' }
])

// 设置菜单
const settingList = ref([
  { title: '账号设置', icon: 'setting-o', action: 'account' },
  { title: '消息通知', icon: 'bell', action: 'notification' },
  { title: '隐私设置', icon: 'shield-o', action: 'privacy' },
  { title: '关于我们', icon: 'info-o', action: 'about' }
])

// 跳转到订单页面
const goToOrders = (type: string) => {
  showToast(`跳转到${type}订单`)
  // 这里可以跳转到对应的订单页面
}

// 处理菜单点击
const handleMenuClick = (action: string) => {
  switch (action) {
    case 'address':
      showToast('收货地址管理')
      break
    case 'coupon':
      showToast('我的优惠券')
      break
    case 'points':
      showToast('积分商城')
      break
    case 'favorite':
      showToast('我的收藏')
      break
    case 'history':
      showToast('浏览历史')
      break
    case 'service':
      showToast('客服中心')
      break
    default:
      showToast(`功能开发中: ${action}`)
  }
}

// 处理设置点击
const handleSettingClick = (action: string) => {
  switch (action) {
    case 'account':
      showToast('账号设置')
      break
    case 'notification':
      showToast('消息通知设置')
      break
    case 'privacy':
      showToast('隐私设置')
      break
    case 'about':
      showToast('关于我们')
      break
    default:
      showToast(`设置开发中: ${action}`)
  }
}

// 退出登录
const logout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？'
    })
    showToast('退出登录成功')
    // 这里可以清除用户信息并跳转到登录页
  } catch {
    // 用户取消退出
  }
}
</script>

<style scoped>
.profile {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 60px;
}

.user-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px 16px;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 10px;
}

.user-avatar {
  margin-right: 16px;
}

.user-info {
  flex: 1;
}

.username {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.user-desc {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.arrow-icon {
  color: white;
  opacity: 0.8;
}

.order-stats {
  background: white;
  padding: 16px;
  margin-bottom: 10px;
}

.stats-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.stat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.menu-section {
  margin-bottom: 10px;
}

.logout-section {
  padding: 24px 16px;
}

:deep(.van-grid-item__content) {
  position: relative;
  padding: 16px 8px;
}

:deep(.van-cell) {
  padding: 16px;
}

:deep(.van-cell__title) {
  font-size: 15px;
}
</style>